<template>
	<view class="container">
		<view class="banner">
			<image src="../../static/微信图片_20221012093359.jpg" mode=""></image>
		</view>
		<view class="switchSign"></view>
		<view class="flex tagTop"  :class="{'topfixed-active':topfixed==1}">
		<view class="xuanX1 " v-for="(xin,index) in list"  :key="xin.id" :id="xin.id">
				<p class="name" :class="navIndex==index ? 'activite1' : ''" @click="checkIndex(index)">{{xin.name}}</p>
		</view>
		</view>
		<!--  -->
		<view class="content1" v-if="navIndex==0" v-for="(item,index) in list2" :key="index">
			<view class="aoliG">
				<view class="left">
					<image src="../../static/q3.png" mode=""></image>
				</view>
				<view class="right">
					<p class="h1">{{item.text1}}</p>
					<p class="km">{{item.text2}}</p>
				</view>
			</view>
			<view class="bottom1">
				<view class="top1 flex">
					<p class="ph3">{{item.text3}}</p>
					<p><span class="ph5">{{item.text4}}</span><span class="ph4">￥{{item.text6}}</span><span style="margin-left: 20px;" class="btn3">{{item.text7}}</span></p>
				</view>
				<view class="top1 flex">
					<p class="ph3">{{item.text3}}</p>
					<p><span class="ph5">￥</span><span class="ph4">30</span><span style="margin-left: 20px;" class="btn3">抢购</span></p>
				</view>
			</view>
		</view>
		<view class="content1" v-if="navIndex==1" v-for="(item,index) in list2" :key="index">
			<view class="aoliG">
				<view class="left">
					<image src="../../static/q3.png" mode=""></image>
				</view>
				<view class="right">
					<p class="h1">{{item.text1}}</p>
					<p class="km">{{item.text2}}</p>
				</view>
			</view>
			<view class="bottom1">
				<view class="top1 flex">
					<p class="ph3">{{item.text3}}</p>
					<p><span class="ph5">{{item.text4}}</span><span class="ph4">￥{{item.text6}}</span><span style="margin-left: 20px;" class="btn3">{{item.text7}}</span></p>
				</view>
				<view class="top1 flex">
					<p class="ph3">{{item.text3}}</p>
					<p><span class="ph5">￥</span><span class="ph4">30</span><span style="margin-left: 20px;" class="btn3">抢购</span></p>
				</view>
			</view>
		</view>
		<view class="content1" v-if="navIndex==2" v-for="(item,index) in list2" :key="index">
			<view class="aoliG">
				<view class="left">
					<image src="../../static/q3.png" mode=""></image>
				</view>
				<view class="right">
					<p class="h1">{{item.text1}}</p>
					<p class="km">{{item.text2}}</p>
				</view>
			</view>
			<view class="bottom1">
				<view class="top1 flex">
					<p class="ph3">{{item.text3}}</p>
					<p><span class="ph5">{{item.text4}}</span><span class="ph4">￥{{item.text6}}</span><span style="margin-left: 20px;" class="btn3">{{item.text7}}</span></p>
				</view>
				<view class="top1 flex">
					<p class="ph3">{{item.text3}}</p>
					<p><span class="ph5">￥</span><span class="ph4">30</span><span style="margin-left: 20px;" class="btn3">抢购</span></p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navIndex: 0,
				topfixed: 0,
				list:[
					{
					name:'全部'
				},
				{
					name:'洗车'
				},
				{
					name:'美容'
				}
				],
				list2:[
					{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},
					{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},
					{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},
					{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},
					{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},
					{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},
					{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},{
						text1:'干啥的汽车美容中心',
						text2:'1.76km | 山东省泰安市泰山街南湖大街',
						text3:'标准洗车-五座轿车',
						text5:'￥',
						text6:'30',
						text7:'抢购'
					},
				]
			}
		},
		onPageScroll(res) {
			var _this = this
			var temptop;
			//uni.createSelectorQuery()返回一个 SelectorQuery 对象实例。
			//可以在这个实例上使用 select 等方法选择节点，
			const query = uni.createSelectorQuery();
			//select在当前页面下选择第一个匹配选择器的节点，
			//boundingClientRect添加节点的布局位置的查询请求。其功能类似于 DOM 的 getBoundingClientRect。
			query.select('.switchSign').boundingClientRect();
			//selectViewport选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息
			//scrollOffset添加节点的滚动位置查询请求。
			query.selectViewport().scrollOffset();
			//exec执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。
			query.exec(function(res) {
				console.log(res);
				res[0].top // .switchSign节点距离上边界的坐标
				res[1].scrollTop // 显示区域的竖直滚动位置
				temptop = res[0].top;
				if (temptop <= '2') {
					_this.topfixed = 1;
				} else {
					_this.topfixed = 0;
				}
			})
		},
		methods:{
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
		}
	}
</script>

<style>
	image{width: 100%;}
	.banner image{height: 300rpx;}
	.container{width: 90%; margin: 0 auto;}
	.flex{display: flex;justify-content: space-between;}
	.xuanX1{margin:30px 0;display: flex;justify-content: space-between;width: 30%;}
	.activite1 {
		color: red;
		border-bottom: red 3px solid;
	}
	.activite{color: red;}
	.content1{background-color: #fff;overflow: hidden;padding: 20rpx;margin-bottom: 20px;border-radius: 15px;}
	.left image{width: 150rpx;height: 150rpx;}
	.left{float: left;width:30%;}
	.right{float: left;width: 70%;}
	.h1{font-weight: bold;font-size: 20px;margin:5px 0;}
	.km{font-size: 25rpx;margin-bottom: 40px;}
	.bottom1{margin-top:50px;}
	.top1{width: 100%;margin-top: 20px;}
	.top1 button{width: 100%;}
	.btn3{display: inline-block; width:70px;background-color: pink;border: red 1px solid; text-align: center;line-height: 30px;border-radius: 25px;}
	.ph3{line-height: 30px;}
	.ph4{color: red;font-size: 20px;}
	.ph5{color: red;}
	
	
	.content {
	 		width: 100%;
	 		margin: 0 auto;
	 	}
	
	 	.wrap .list {
	 		width: 700upx;
	 		height: 200upx;
	 		line-height: 200upx;
	 		margin: 0 auto;
	 		text-align: center;
	 		border-bottom: 2upx solid #EEEEEE;
	 	}
	
	 	.wrap .list text {
	 		font-size: 36upx;
	 		font-weight: bold;
	 		color: #333333;
	 	}
	
	 	.topfixed-active {
	 		width: 100%;
	 		padding: 0 25upx;
	 		position: fixed;
	 		top: var(--window-top);
	 		left: 0;
	 		background: #fff;
	 		z-index: 9;
	 		box-sizing: border-box;
	 	}
	.topfixed-active1{
		background-color: #fff;
		width: 100%;
		padding: 10px;
		position: fixed;
		top: 60px;
		left: 0;
		background: #fff;
		z-index: 10;
		box-sizing: border-box;
		border-radius: 0 0 10px 10px;
	}
	 	.tagTop {
	 		background-color: #fff;
	 		text-align: center;
			border-radius: 0 0 10px 10px;
	 	}
	
	 	.paTop80 {
	 		padding-top: 80upx;
	 	}
</style>